<template>
    <div>
        <!--查询条件start --111s-->
        <el-card>
        <el-form :inline="true" :model="query" class="query-form" size="small">
            <el-form-item>
                <span >日期查询：</span>
                <el-date-picker
                    v-model="createTime"
                    unlink-panels
                    type="datetimerange"
                    :picker-options="pickerOptions"
                    range-separator="-"
                    start-placeholder="请选择开始日期"
                    end-placeholder="请选择结束日期"
                    align="left"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :default-time="['00:00:00','23:59:59']"
                    @change="dateChange"
                ></el-date-picker>
            </el-form-item>
        </el-form>
        <el-form :inline="true" :model="query" class="query-form" size="small">
            <el-form-item >
                <span >分类查询：</span>
                <el-select v-model="query.topcategoryid" placeholder="请选择一级分类" @change="topchange()" clearable>
                    <el-option
                        v-for="(item,index) in category"
                        :key="index"
                        :label="item.topcategoryname"
                        :value="item.topcategoryid">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item >
                <el-select v-model="query.secondarycategoryid" placeholder="请选择二级分类" clearable @change="secondchange()">
                    <el-option
                        v-for="(item,index) in busCommoditySecondaryCategoryList"
                        :key="index"
                        :label="item.topcategoryname"
                        :value="item.topcategoryid">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item >
                <el-select v-model="query.thirdcategoryid" placeholder="请选择三级分类" clearable @change="onSubmit()">
                    <el-option
                        v-for="(item,index) in busCommodityThirdCategoryList"
                        :key="index"
                        :label="item.topcategoryname"
                        :value="item.topcategoryid">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <el-form :inline="true" :model="query" class="query-form" size="small">
            <el-form-item>
            <span >商品查询：</span>
            <el-form-item class="query-form-item">
                <el-input
                    v-model="query.content"
                    placeholder="请输入商品名称"
                    prefix-icon="el-icon-search"
                    @keyup.enter.native="onSubmit"
                    clearable
                ></el-input>
            </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-refresh" @click="onRest"></el-button>
                    <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form-item >
        </el-form>
        <!--列表start --222s-->
        <el-table
            v-loading="loading"
            :data="list"
            :header-cell-style="{background:'#F4F4F5',color:'#606266'}"
            border>
            <!-- <el-table-column type="selection" width="50" align="center" fixed/> -->
            <el-table-column label="商品ID" prop="commodityid" width="100" align="center"/>
            <el-table-column label="商品图片" prop="commodityicon" align="center" width="100">
                <template slot-scope="scope">
                    <el-popover v-if="scope.row.commodityicon" placement="right" trigger="hover">
                        <img :src="scope.row.commodityicon" style="width:400px;border-radius:3px;">
                        <img  slot="reference" :src="scope.row.commodityicon"  style="max-height: 80px;max-width: 50px;border-radius:5px;" >
                    </el-popover>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column label="商品名称" prop="commodityname"  align="center" :show-overflow-tooltip="true"/>
            <el-table-column label="平台/品牌名称" prop="companyName" width="150" align="center" :show-overflow-tooltip="true"/>
            <el-table-column label="一级分类" prop="topcategoryname" width="150" align="center" :show-overflow-tooltip="true"/>
            <el-table-column label="二级分类" prop="secondarycategoryname" width="150" align="center" :show-overflow-tooltip="true"/>
            <el-table-column label="三级分类" prop="thirdcategoryname" width="150" align="center" :show-overflow-tooltip="true"/>
            <el-table-column label="库存" prop="commoditynum" width="100" align="center"/>
            <el-table-column label="审核状态" width="120" align="center">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.commoditystatus == 0">审核中</el-tag>
                    <el-tag v-if="scope.row.commoditystatus == 1">审核通过</el-tag>
                    <el-tag v-if="scope.row.commoditystatus == 2">审核拒绝</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="添加时间" width="180"  :show-overflow-tooltip="true" align="center">
                <template slot-scope="scope">
                    <i class="el-icon-time" v-if="scope.row.createtime!=null"></i>
                    <span  v-if="scope.row.createtime!=null">{{ scope.row.createtime | formatDateStr('yyyy-MM-dd hh:mm:ss') }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作" width="150" align="center" fixed="right">
                <template slot-scope="scope">
                    <el-button  type="primary" size="mini"  @click.native="detailForm(scope.$index, scope.row)">查看</el-button>
                    <el-button v-if="scope.row.commoditystatus==0" type="primary" size="mini" @click.native="examineForm(scope.$index, scope.row)">审核</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页模块start-->
        <el-pagination
            class="pagination-container"
            background
            :page-size="query.pageSize"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total,sizes,prev, pager, next, jumper"
            :current-page="query.currentPage"
            :page-sizes="[5,10, 20, 30, 50]"
            :total="totalNumber"
        ></el-pagination>
        <!--分页模块end-->

        <!--查看弹框-->
        <el-dialog
            title="查看"
            :visible.sync="detailVisible"
            :before-close="hideDetailForm"
            width="50%"
            top="5vh"
            v-dialogDrag
            :close-on-click-modal="false"
            >
        <template slot="title">
            <div class="avue-crud__dialog__header">
                <span class="el-dialog__title">
                    <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
                    查看
                </span>
                <div class="avue-crud__dialog__menu" >
                    <!-- <i class="el-icon-full-quanping"></i> -->
                    <icon-svg icon-class="quanping" />
                    <span  class="mention">双击全屏</span>
                </div>
            </div>
        </template>
        <el-card>
            <el-form :model="formData" label-width="140px">
                <el-form-item label="商品名称：">
                    <input v-model="formData.commodityname" type="text" readonly>
                </el-form-item>
                <el-form-item label="商品分类：">
                    <span>{{formData.topcategoryname+","+formData.secondarycategoryname+","+formData.thirdcategoryname}}</span>
                </el-form-item>

                <el-form-item style="border-bottom:1px solid #ebeef5;" label-width="0px">

                    <el-form-item label="代理价：" style="width:30%;display: inline-block;">
                        <input v-model="formData.commodityoldprice" type="text" readonly>
                    </el-form-item>
                    <el-form-item label="零售价：" style="margin-left:80px; width:30%;display: inline-block;">
                        <input v-model="formData.commodityprice" type="text" readonly>
                    </el-form-item>
                </el-form-item>
                <el-form-item style="border-bottom:1px solid #ebeef5;" label-width="0px">
                    <el-form-item label="添加时间：" style="width:30%;display: inline-block;">
                        <input :value="formData.createtime |formatDateStr('yyyy-MM-dd') "  type="text" readonly>
                    </el-form-item>
                    <el-form-item label="商品ID：" style="margin-left:80px; width:30%;display: inline-block;">
                        <input v-model="formData.commodityid" type="text" readonly>
                    </el-form-item>
                </el-form-item>
                <!-- <el-form-item style="border-bottom:1px solid #ebeef5;" label-width="0px">
                    <el-form-item label="商品评论：" style="width:30%;display: inline-block;">
                       <el-button @click="lookcomment(formData.commodityid)">查看</el-button>
                    </el-form-item>
                </el-form-item> -->
                <el-form-item style="border-bottom:1px solid #ebeef5;" label-width="0px">
                    <el-form-item label="封面图：" style="width:30%;display: inline-block">
                        <!--<img :src="formData.userpic" alt style="width: 60px;height: 50px">-->
                        <el-popover v-if="formData.commodityicon" placement="right" trigger="hover">
                            <img :src="formData.commodityicon" style="width:400px;border-radius:3px;">
                            <img slot="reference" :src="formData.commodityicon" style="max-height: 80px;max-width: 50px;border-radius:5px;">
                        </el-popover>
                        <span v-else>-</span>
                    </el-form-item>
                    <el-form-item label="库存：" style="margin-left:80px; width:30%;display: inline-block;">
                        <input v-model="formData.commoditynum" type="text" readonly>
                    </el-form-item>
                </el-form-item>
                <!-- 商品属性-->
                <el-form-item label-width="80px" label="商品属性" style="background: #e1e1e1" />
                <span v-if="attributecontenct !=[] && attributecontenct !=null">
                <h3 style="height: 50px; margin-left: 40px" class="thrTitle" >基本属性</h3>
                <div :prop="'fieldname' + index" v-for="(item, index) in attributecontenct" :key="item.id">
                    <el-form-item label-width="180px" :label="item.fieldname + '：'">
                    <el-input
                        v-model.trim="formData1[item.fieldname]"
                        @input="onInput1()"
                        @change="changeInput1(item)"
                        v-if="item.fieldtype == '文字'"
                        type="text"
                        :disabled="true"
                        maxlength="10"
                        :placeholder="'请填写' + item.fieldname"
                    ></el-input>
                    <el-input
                        v-model.trim="formData1[item.fieldname]"
                        @input="onInput1()"
                        @change="changeInput1(item)"
                        v-if="item.fieldtype == '数字'"
                        :disabled="true"
                        type="number"
                        maxlength="10"
                        :placeholder="'请填写' + item.fieldname"
                    ></el-input>
                    
                    </el-form-item>
                </div>
                </span>

                <span v-if="attributeextendcontenct !=[] && attributeextendcontenct !=null">
                <h3 style="height: 50px; margin-left: 40px" class="thrTitle"  >扩展属性</h3>
                <div
                    :prop="'extendfieldname' + index"
                    v-for="(item, index) in attributeextendcontenct"
                    :key="item.id"
                >
                    <el-form-item
                    label-width="180px"
                    :label="item.extendfieldname + '：'"
                    >
                    <el-input
                        v-model.trim="formData1[item.extendfieldname]"
                        
                        v-if="item.fieldtype == '文字'"
                        :disabled="true"
                        type="text"
                        maxlength="10"
                        :placeholder="'请填写' + item.extendfieldname"
                    ></el-input>
                    <el-input
                        v-model.trim="formData1[item.extendfieldname]"
                        v-if="item.fieldtype == '数字'"
                        :disabled="true"
                        type="number"
                        maxlength="10"
                        :placeholder="'请填写' + item.extendfieldname"
                    ></el-input>
                    
                    </el-form-item>
                </div>
                </span>

                <el-form-item label-width="120px" label="商品资质认证" style="background: #e1e1e1">
                </el-form-item>
                <span v-if="categoryTemplate != [] && categoryTemplate != null">
                    <h3 class="thrTitle" style="height:50px">{{categoryTemplate.name || ""}}</h3>
                    <el-form-item :label="item.fieldname+'：'" label-width="180px" :prop="'fieldname'+index" v-for="(item,index) in categoryTemplate.templateItemFormList" :key="item.id">
                        <input type="hidden" v-model="item.fieldvalue">
                        <el-input v-model="formData4[item.fieldname]"  v-if="item.fieldtype == '文字'" type="text" :placeholder="'请填写'+item.fieldname" disabled></el-input>
                        <el-input v-model="formData4[item.fieldname]" v-if="item.fieldtype == '数字'" type="number" :placeholder="'请填写'+item.fieldname" disabled></el-input>
                        <el-popover v-if="item.fieldtype == '图片'" placement="right" trigger="hover">
                            <img :src="item.fieldvalue" style="width:400px;border-radius:3px;">
                            <img slot="reference" :src="item.fieldvalue" style="max-height: 80px;max-width: 150px;border-radius:5px;">
                        </el-popover>
                    </el-form-item>
                </span>
                <!--商品规格-->
                <el-table
                    v-loading="loading"
                    :data="parameterlist"
                    :header-cell-style="{background:'#F4F4F5',color:'#606266'}"
                    border >
                    <el-table-column label="商品图片" width="100"  align="center">
                        <template slot-scope="scope">
                            <el-popover v-if="scope.row.inventorypic" placement="right" trigger="hover">
                                <img :src="scope.row.inventorypic" style="width:400px;border-radius:3px;">
                                <img slot="reference" :src="scope.row.inventorypic" style="max-height: 80px;max-width: 50px;border-radius:5px;" >
                            </el-popover>
                            <span v-else>-</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="规格参数" align="center">
                        <el-table-column v-for="(item,index) in inputData" :key="index" :label='item.key' width="150" align="center">
                            <template slot-scope="scope">
                                <div v-if="scope.row.splist!==undefined">
                                    <el-select v-model="scope.row.splist[index]" placeholder="请选择" disabled  ref="sel" >
                                        <el-option
                                            v-for="(it,ind) in (item.val.split(','))"
                                            :key="ind"
                                            :label="it"
                                            :value="it">
                                        </el-option>
                                    </el-select>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table-column>

                    <el-table-column label="成本价" prop="costprice"  align="center"/>
                    <el-table-column label="代理价" prop="primaryagentprice"  align="center"/>
                    <el-table-column label="经销价" prop="secondaryagentprice"  align="center"/>
                    <el-table-column label="分销价" prop="commodityprice"  align="center"/>
                    <el-table-column label="零售价" prop="commodityoldprice" align="center"/>
                    <el-table-column label="县域收益占比(%)" prop="profitproportion" width="150" align="center">
                        <template slot-scope="scope">
                            <el-input-number style="width: 120px;" v-model="scope.row.profitproportion" align="center" disabled
                            :min="0" :controls="false" :precision="4" ></el-input-number>

                        </template>
                    </el-table-column>


                    <el-table-column label="库存" prop="inventorynum" align="center"/>
                </el-table>
                <el-form-item label-width="65px" label="轮播图" style="background: #e1e1e1;margin-top:20px"/>
                <el-form-item >
                    <div v-for="(item,index) in formData.commoditypiclist" :key="index" style="display:inline-block;">
                        <img :src="item" style="width:200px;border-radius:3px;margin-left: 5px;">
                    </div>
                </el-form-item>
                <el-form-item label-width="80px" label="商品详情" style="background: #e1e1e1;margin-top:20px"/>
                <span v-html="formData.commoditydesc" style="margin-left:10%;display:block;"></span>

            </el-form>
        </el-card>
        </el-dialog>
        <!--审核弹框-->
        <el-dialog
            title="审核"
            :visible.sync="examineVisible"
            :before-close="hideExamineForm"
            width="50%"
            top="5vh"
            v-dialogDrag
            :close-on-click-modal="false"
        >
         <template slot="title">
            <div class="avue-crud__dialog__header">
                <span class="el-dialog__title">
                    <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
                    审核
                </span>
                <div class="avue-crud__dialog__menu" >
                    <icon-svg icon-class="quanping" />
                    <span  class="mention">双击全屏</span>
                </div>
            </div>
        </template>
        <el-card>
            <el-form :model="formData" label-width="140px">
                <el-form-item label="商品名称：">
                    <input v-model="formData.commodityname" type="text" readonly>
                </el-form-item>
                <el-form-item label="商品分类：">
                    <span>{{formData.topcategoryname+","+formData.secondarycategoryname+","+formData.thirdcategoryname}}</span>
                </el-form-item>

                <el-form-item style="border-bottom:1px solid #ebeef5;" label-width="0px">

                    <el-form-item label="代理价：" style="width:30%;display: inline-block;">
                        <input v-model="formData.commodityoldprice" type="text" readonly>
                    </el-form-item>
                    <el-form-item label="零售价：" style="margin-left:80px; width:30%;display: inline-block;">
                        <input v-model="formData.commodityprice" type="text" readonly>
                    </el-form-item>

                </el-form-item>

                <el-form-item style="border-bottom:1px solid #ebeef5;" label-width="0px">
                    <el-form-item label="添加时间：" style="width:30%;display: inline-block;">
                        <input :value="formData.createtime |formatDateStr('yyyy-MM-dd')" type="text" readonly>
                    </el-form-item>
                    <el-form-item label="商品ID：" style="margin-left:80px; width:30%;display: inline-block;">
                        <input v-model="formData.commodityid" type="text" readonly>
                    </el-form-item>
                </el-form-item>
                <!-- <el-form-item style="border-bottom:1px solid #ebeef5;" label-width="0px">
                    <el-form-item label="商品评论：" style="width:30%;display: inline-block;">
                       <el-button @click="lookcomment(formData.commodityid)">查看</el-button>
                    </el-form-item>
                </el-form-item> -->
                <el-form-item style="border-bottom:1px solid #ebeef5;" label-width="0px">
                    <el-form-item label="封面图：" style="width:30%;display: inline-block">
                        <el-popover v-if="formData.commodityicon" placement="right" trigger="hover">
                            <img :src="formData.commodityicon" style="width:400px;border-radius:3px;">
                            <img slot="reference" :src="formData.commodityicon" style="max-height: 80px;max-width: 50px;border-radius:5px;" >
                        </el-popover>
                        <span v-else>-</span>
                    </el-form-item>
                    <el-form-item label="库存：" style="margin-left:80px; width:30%;display: inline-block;">
                        <input v-model="formData.commoditynum" type="text" readonly>
                    </el-form-item>
                </el-form-item>

                <!-- 商品属性-->
                <el-form-item label-width="80px" label="商品属性" style="background: #e1e1e1" />
                <span v-if="attributecontenct !=[] && attributecontenct !=null">
                <h3 style="height: 50px; margin-left: 40px" class="thrTitle" >基本属性</h3>
                <div :prop="'fieldname' + index" v-for="(item, index) in attributecontenct" :key="item.id">
                    <el-form-item label-width="180px" :label="item.fieldname + '：'">
                    <el-input
                        v-model.trim="formData1[item.fieldname]"
                        v-if="item.fieldtype == '文字'"
                        type="text"
                        :disabled="true"
                        maxlength="10"
                        :placeholder="'请填写' + item.fieldname"
                    ></el-input>
                    <el-input
                        v-model.trim="formData1[item.fieldname]"
                        v-if="item.fieldtype == '数字'"
                        :disabled="true"
                        type="number"
                        maxlength="10"
                        :placeholder="'请填写' + item.fieldname"
                    ></el-input>
                    
                    </el-form-item>
                </div>
                </span>

                <span v-if="attributeextendcontenct  !=[] && attributeextendcontenct !=null">
                <h3 style="height: 50px; margin-left: 40px" class="thrTitle"  >扩展属性</h3>
                <div
                    :prop="'extendfieldname' + index"
                    v-for="(item, index) in attributeextendcontenct"
                    :key="item.id"
                >
                    <el-form-item
                    label-width="180px"
                    :label="item.extendfieldname + '：'"
                    >
                    <el-input
                        v-model.trim="formData1[item.extendfieldname]"
                        v-if="item.fieldtype == '文字'"
                        :disabled="true"
                        type="text"
                        maxlength="10"
                        :placeholder="'请填写' + item.extendfieldname"
                    ></el-input>
                    <el-input
                        v-model.trim="formData1[item.extendfieldname]"
                        v-if="item.fieldtype == '数字'"
                        :disabled="true"
                        type="number"
                        maxlength="10"
                        :placeholder="'请填写' + item.extendfieldname"
                    ></el-input>
                    
                    </el-form-item>
                </div>
                </span>
                <el-form-item label-width="120px" label="商品资质认证" style="background: #e1e1e1"> </el-form-item>

                <span v-if="categoryTemplate != [] && categoryTemplate != null">
                    <h3 style="height: 50px" class="thrTitle">{{categoryTemplate.name || ""}}</h3>
                    <el-form-item :label="item.fieldname+'：'" label-width="180px" :prop="'fieldname'+index" v-for="(item,index) in categoryTemplate.templateItemFormList" :key="item.id">
                        <input type="hidden" v-model="item.fieldvalue">
                        <el-input v-model="formData4[item.fieldname]" v-if="item.fieldtype == '文字'" type="text" :placeholder="'请填写'+item.fieldname" disabled></el-input>
                        <el-input v-model="formData4[item.fieldname]"  v-if="item.fieldtype == '数字'" type="number" :placeholder="'请填写'+item.fieldname" disabled></el-input>
                        <el-popover v-if="item.fieldtype == '图片'" placement="right" trigger="hover">
                            <img :src="item.fieldvalue" style="width:400px;border-radius:3px;">
                            <img slot="reference" :src="item.fieldvalue" style="max-height: 80px;max-width: 150px;border-radius:5px;">
                        </el-popover>
                    </el-form-item>
                </span>
                <!--商品规格-->
                <el-table
                    v-loading="loading"
                    :data="parameterlist"
                    :header-cell-style="{background:'#F4F4F5',color:'#606266'}"
                    border
                >
                    <!--商品规格-->
                    <el-table-column label="商品图片" width="100"  align="center">
                        <template slot-scope="scope">
                            <el-popover v-if="scope.row.inventorypic" placement="right" trigger="hover">
                                <img :src="scope.row.inventorypic" style="width:400px;border-radius:3px;">
                                <img slot="reference" :src="scope.row.inventorypic" style="max-height: 80px;max-width: 50px;border-radius:5px;" >
                            </el-popover>
                            <span v-else>-</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="规格参数" align="center">
                        <el-table-column v-for="(item,index) in inputData" :key="index" :label='item.key' width="150" align="center">
                            <template slot-scope="scope">
                                <div v-if="scope.row.splist!==undefined">
                                    <el-select v-model="scope.row.splist[index]" placeholder="请选择" disabled  ref="sel" >
                                        <el-option
                                            v-for="(it,ind) in (item.val.split(','))"
                                            :key="ind"
                                            :label="it"
                                            :value="it">
                                        </el-option>
                                    </el-select>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table-column>

                    <el-table-column label="成本价" prop="costprice"  align="center"/>
                    <el-table-column label="代理价" prop="primaryagentprice"  align="center"/>
                    <el-table-column label="经销价" prop="secondaryagentprice"  align="center"/>
                    <el-table-column label="分销价" prop="commodityprice"  align="center"/>
                    <el-table-column label="零售价" prop="commodityoldprice" align="center"/>
                     <el-table-column label="县域收益占比(%)" prop="profitproportion" width="150" align="center">
                            <template slot-scope="scope">
                                <el-input-number style="width: 120px;" v-model="scope.row.profitproportion" align="center" disabled
                                :min="0" :controls="false" :precision="4" ></el-input-number>

                            </template>
                        </el-table-column>
                    <!-- <el-table-column label="县域收益占比(%)" prop="profitproportion" align="center" width="150"/> -->
                    <el-table-column label="库存" prop="inventorynum" align="center"/>
                </el-table>

                <el-form-item label-width="65px" label="轮播图" style="background: #e1e1e1;margin-top:20px"/>
                <el-form-item >
                    <div v-for="(item,index) in formData.commoditypiclist" :key="index" style="display:inline-block;">
                        <img :src="item" style="width:200px;border-radius:3px;margin-left: 5px;">
                    </div>
                </el-form-item>
                <el-form-item label-width="80px" label="商品详情" style="background: #e1e1e1;margin-top:20px"/>
                <span v-html="formData.commoditydesc" style="margin-left:10%;display:block;"></span>
            </el-form>
        </el-card>
            <span slot="footer" class="dialog-footer">
                <el-button @click="examine(2)">驳 回</el-button>
                <el-button type="primary" :loading="formSumbitLoding" @click="examine(1)">审核通过</el-button>
                <el-button @click="hideExamineForm">取消</el-button>
            </span>
        </el-dialog>
        <el-dialog title="请填写驳回原因" :visible.sync="dialogFormVisible">
            <el-form>
                <el-form-item label="驳回原因：">
                    <el-input type="textarea" v-model="rejectreason"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="reject">确 定</el-button>
            </div>
        </el-dialog>
        </el-card>
    </div>
</template>
<script>
    import {
        getList,
        commodityToExamine,
    } from "../../api/buscommodity/buscommodityAudit.js";
    import {getCategory} from "../../api/classification/classification.js";
    import Tinymce from "../../components/Tinymce/index.vue";
    import {BASE_URL} from "../../config/app";

    import { quillEditor } from "vue-quill-editor"; //调用编辑器
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';
    /*富文本*/
    const toolbarOptions = [
        ['bold', 'italic', 'underline', 'strike'],    // toggled buttons
        [{'header': 1}, {'header': 2}],        // custom button values
        [{'list': 'ordered'}, {'list': 'bullet'}],
        [{'indent': '-1'}, {'indent': '+1'}],     // outdent/indent
        [{'direction': 'rtl'}],             // text direction
        [{'size': ['small', false, 'large', 'huge']}], // custom dropdown
        [{'header': [1, 2, 3, 4, 5, 6, false]}],
        [{'color': []}, {'background': []}],     // dropdown with defaults from theme
        [{'font': []}],
        [{'align': []}],
        ['link', 'image'],
        ['clean']

    ]
    export default {
        components: {
            Tinymce ,
            quillEditor
        },
        data() {
            return {
                radio: '1',
                options: [
                    {
                        value: 0,
                        label: '代理商品'
                    },
                    {
                        value: 1,
                        label: '代理自营商品'
                    },
                ],
                pickerOptions: {//快速选择日期
                    shortcuts: [
                        {
                            text: "最近一周",
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(
                                    start.getTime() - 3600 * 1000 * 24 * 7
                                );
                                picker.$emit("pick", [start, end]);
                            }
                        },
                        {
                            text: "最近一个月",
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(
                                    start.getTime() - 3600 * 1000 * 24 * 30
                                );
                                picker.$emit("pick", [start, end]);
                            }
                        },
                        {
                            text: "最近三个月",
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(
                                    start.getTime() - 3600 * 1000 * 24 * 90
                                );
                                picker.$emit("pick", [start, end]);
                            }
                        },
                        {
                            text: "最近六个月",
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(
                                    start.getTime() - 3600 * 1000 * 24 * 180
                                );
                                picker.$emit("pick", [start, end]);
                            }
                        }
                    ]
                },
                attributecontenct:[],//商品属性
                attributeextendcontenct:[],//商品属性模板
                formData1:{},//商品属性模板
                formData4: {
                    // 第四步表单
                    storename: null, // 店铺名称
                    enterinfoid: null, // 主键
                    certificationcontent: null, // 商品分类模板
                    topcategoryid: null, // 一级商品分类id
                    secondarycategoryid: null, // 二级商品分类id
                    categoryid: null // 三级商品分类id
                },
                query: {//查询条件
                    content: "",
                    starttime: "",
                    endtime: "",
                    onshelfstatus: '',//0全部，  1不上架 2上架
                    recommendstatus: "",//0不推荐1推荐
                    currentPage: 1,
                    pageSize: 5,
                    topcategoryid: "", //一级
                    secondarycategoryid: "",//二级
                    thirdcategoryid: ""//三级
                },
                formData: {},//新增或修改的对象
                commoditypiclist:[],
                formName: '',
                formMap: {
                    detail: "查看",
                    examine:"审核"
                },

                uploadUrl: BASE_URL + '/goldendays-currency/tool/uploadpro',//上传图片
                uploadvideo: BASE_URL + "/tool/uploadVideo",//上传视频
                uploadData: [],//[{name:"12",url:"http://localhost/maotianxiaupload/common/2019-08-23/MH1566545692219_mid.jpg"}], // 图片data
                vuploadData:[], //视频
                uploadData1: {}, // 图片data
                createTime: [],//选择日期时需要的model
                list: [],//列表集合
                parameterlist: [], //add参数list
                //savadd参数list
                category: [],//分类列表
                busCommoditySecondaryCategoryList: [], //二级
                busCommodityThirdCategoryList: [],//三级
                inputData: [],// 循环创建input存值
                totalNumber: 0,//分页总页数
                formVisible: false,//添加编辑显示
                loading: true,//列表加载
                formLoading: false,//表单提交加载
                detailVisible: false,//查看
                examineVisible:false,
                dialogFormVisible: false,
                formSumbitLoding: false, //表单提交加载
                rejectreason: "",
                categoryTemplate: [], // 商品类目模板
                quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
                // content: null,
                editorOption: {
                    placeholder: '',
                    theme: 'snow', // or 'bubble'
                    modules: {
                        toolbar: {
                            container: toolbarOptions,
                            handlers: {
                                'image': function (value) {
                                    if (value) {
                                        // 触发input框选择图片文件
                                        document.querySelector('.edituploader input').click()
                                    } else {
                                        this.quill.format('image', false);
                                    }
                                }
                            }
                        }
                    }
                },
            };
        },
        watch: {},
        methods: {
            examine(type) {
                if (type == 2) {
                    this.dialogFormVisible = true;
                    return false;
                }
                // 1 通过 2 驳回
                let data = {
                    commodityid: this.formData.commodityid,
                    commoditystatus: 1
                };
                this.commodityToExamine(data);
            },
            commodityToExamine(data) {
                commodityToExamine(data)
                    .then(response => {
                        // console.log(response);
                        if (response.code != 0) {
                            this.$message.error(response.message);
                            return false;
                        }
                        this.dialogAddOrEdit = false;
                        this.examineVisible = false;
                        this.dialogFormVisible = false;
                        this.$message.success(response.message);
                        this.getList();
                        setTimeout(() => {
                            this.loading = false;
                        }, 0.3 * 1000);
                    })
                    .catch(() => {
                    });
            },
            //驳回
            reject() {
                if (!this.rejectreason) {
                    this.$message.error("请填写驳回原因！");
                    return false;
                }
                // 1 通过 2 驳回
                let data = {
                    commodityid: this.formData.commodityid,
                    commoditystatus: 2,
                    rejectreason: this.rejectreason
                };
                this.dialogFormVisible = false;
                this.commodityToExamine(data);
            },

            //查看评论
            lookcomment(v) {

                this.$router.push({path: '/commodity/comment', query: {cid: v}})
                // alert(v)
            },

            //显示 查看弹框
            detailForm(index, row) {
                // debugger;
                this.detailVisible = true;
                this.attributecontenct =[]
                this.attributeextendcontenct =[]
                if (row !== null) {
                    this.inputData=[]
                    this.formData = Object.assign({}, row);
                    // console.info(row)
                    // console.info(this.formData )
                    this.formData.secondarycategoryid=row.secondarycategoryid;
                    this.formData.thirdcategoryid=row.thirdcategoryid;
                    //处理商品属性模板
                    if (row.attributecontenct != null) {
                        this.attributecontenct = JSON.parse(row.attributecontenct);
                        this.formData.attributecontenct = JSON.parse( row.attributecontenct );
                        if ( this.attributecontenct != null && this.attributecontenct != undefined) {
                                this.attributecontenct .forEach((item) => {
                                    this.formData1[item.fieldname] = item.fieldvalue;
                                });
                        }
                    }
                    if (row.attributeextendcontenct != null) { 
                        this.attributeextendcontenct = JSON.parse(row.attributeextendcontenct);
                        this.formData.attributeextendcontenct = JSON.parse(row.attributeextendcontenct);
                        if ( this.attributeextendcontenct != null && this.attributeextendcontenct != undefined) {
                                this.attributeextendcontenct.forEach((item) => {
                                    this.formData1[item.extendfieldname] = item.fieldvalue;
                                });
                        }
                    }


                    if(row.certificationcontent!=null){
                        this.categoryTemplate = JSON.parse(row.certificationcontent);
                        this.formData.certificationcontent = JSON.parse(row.certificationcontent);
                        if(this.categoryTemplate.templateItemFormList!=null&&this.categoryTemplate.templateItemFormList!=undefined){
                            this.categoryTemplate.templateItemFormList.forEach(item => {
                                    // item.fieldvalue = this.formData4[item.fieldname];
                                    this.formData4[item.fieldname] = item.fieldvalue;
                                }
                            );
                        }
                    }
                    // this.formData.commoditytype=row.commoditytype+"";
                    if(row.inventorylist!=null&&row.inventorylist[0].inputdata!=null){
                        this.inputData=JSON.parse(row.inventorylist[0].inputdata);
                    }else{
                        let data={
                            key:"",
                            val:""
                        }
                        this.inputData.push(data);
                    }
                }
                let data=[];
                let pic=[];
                let vdata=[];
                let vpic=[];
                for (let i=0;i<row.commoditypiclist.length;i++){
                    let picdata=row.commoditypiclist[i];
                    if(picdata.recoursetype===0){
                        let obj={
                            name:"",
                            url:""
                        }
                        obj.name=i;
                        obj.url=picdata.picurl;
                        data.push(obj);
                        pic.push(picdata.picurl)
                    }
                    if(picdata.recoursetype===1){

                        let obj={
                            name:"",
                            url:""
                        }
                        obj.name=i;
                        obj.url=picdata.picurl;
                        vdata.push(obj);
                        vpic.push(picdata.picurl)
                    }
                }

                this.formData.videopic=vpic;
                this.vuploadData=vdata
                this.commoditypiclist=pic;
                this.formData.commoditypiclist=pic;
                this.uploadData=data;

                this.parameterlist=row.inventorylist;
                
                for(let i=0;i<this.parameterlist.length;i++){
                    let sav=[];
                    this.$set(this.parameterlist[i], "savparameterlist", sav);
                    this.$set(this.parameterlist[i], "splist", sav);

                    var a=this.parameterlist[i].inventory.indexOf("}");
                    var b=this.parameterlist[i].inventory.substring(1,a)
                    var a1=b.split(",");
                    var splist1=[];
                    for (let c=0;c<a1.length;c++) {
                        var s=a1[c].split(":")[1].substring(1,a1[c].split(":")[1].length-1);
                        splist1.push(s)
                    }

                    //县域百分比回显
                    if( this.parameterlist[i].profitproportion<1){
                        (this.parameterlist[i].profitproportion)*= 100;
                    }else{
                        (this.parameterlist[i].profitproportion)
                    }
                    this.parameterlist[i].splist=(splist1);
                    this.parameterlist[i].savparameterlist=JSON.parse(this.parameterlist[i].secinventory);

                    this.parameterlist[i].companytype= this.parameterlist[i].companytype.toString();
                }
                //参数
                let sav=[];
                if(this.parameterlist!=null&&this.parameterlist.length>0){

                    for(let i=0;i<this.parameterlist.length;i++){
                        let pdata=JSON.parse(this.parameterlist[i].secinventory);

                        console.info(pdata)

                        for (let i=0;i<pdata.length;i++) {
                            let mdata=pdata[i]
                            for (let v in mdata){
                                let data={
                                    key:v,
                                    val:mdata[v].toString()
                                }
                                sav.push(mdata[v].toString());
                            }
                        }
                        this.parameterlist.savparameterlist=pdata;
                    }
                    this.parameterlist.splist=sav;
                }
                this.formName = "detail";
            },

            //显示 审核弹框
            examineForm(index, row) {
                this.examineVisible = true;
                if (row !== null) {
                    this.inputData=[]
                    this.formData = Object.assign({}, row);
                    console.info(row)
                    console.info(this.formData )
                    this.formData.secondarycategoryid=row.secondarycategoryid;
                    this.formData.thirdcategoryid=row.thirdcategoryid;

                    //处理商品属性模板
                    if (row.attributecontenct != null) {
                        this.attributecontenct = JSON.parse(row.attributecontenct);
                        this.formData.attributecontenct = JSON.parse( row.attributecontenct );
                        if ( this.attributecontenct != null && this.attributecontenct != undefined) {
                                this.attributecontenct .forEach((item) => {
                                    this.formData1[item.fieldname] = item.fieldvalue;
                                });
                        }
                    }
                    if (row.attributeextendcontenct != null) { 
                        this.attributeextendcontenct = JSON.parse(row.attributeextendcontenct);
                        this.formData.attributeextendcontenct = JSON.parse(row.attributeextendcontenct);
                        if ( this.attributeextendcontenct != null && this.attributeextendcontenct != undefined) {
                                this.attributeextendcontenct.forEach((item) => {
                                    this.formData1[item.extendfieldname] = item.fieldvalue;
                                });
                        }
                    }
                    if(row.certificationcontent!=null){
                        this.categoryTemplate = JSON.parse(row.certificationcontent);
                        this.formData.certificationcontent = JSON.parse(row.certificationcontent);
                        if(this.categoryTemplate.templateItemFormList!=null&&this.categoryTemplate.templateItemFormList!=undefined){
                            this.categoryTemplate.templateItemFormList.forEach(item => {
                                    // item.fieldvalue = this.formData4[item.fieldname];
                                    this.formData4[item.fieldname] = item.fieldvalue;
                                }
                            );
                        }
                    }
                    // this.formData.commoditytype=row.commoditytype+"";
                    if(row.inventorylist!=null&&row.inventorylist[0].inputdata!=null){
                        this.inputData=JSON.parse(row.inventorylist[0].inputdata);
                    }else{
                        let data={
                            key:"",
                            val:""
                        }
                        this.inputData.push(data);
                    }
                }
                let data=[];
                let pic=[];
                let vdata=[];
                let vpic=[];
                for (let i=0;i<row.commoditypiclist.length;i++){
                    let picdata=row.commoditypiclist[i];
                    if(picdata.recoursetype===0){
                        let obj={
                            name:"",
                            url:""
                        }
                        obj.name=i;
                        obj.url=picdata.picurl;
                        data.push(obj);
                        pic.push(picdata.picurl)
                    }
                    if(picdata.recoursetype===1){

                        let obj={
                            name:"",
                            url:""
                        }
                        obj.name=i;
                        obj.url=picdata.picurl;
                        vdata.push(obj);
                        vpic.push(picdata.picurl)
                    }
                }

                this.formData.videopic=vpic;
                this.vuploadData=vdata
                this.commoditypiclist=pic;
                this.formData.commoditypiclist=pic;
                this.uploadData=data;
                this.parameterlist=row.inventorylist;
                

                for(let i=0;i<this.parameterlist.length;i++){
                    let sav=[];
                    this.$set(this.parameterlist[i], "savparameterlist", sav);
                    this.$set(this.parameterlist[i], "splist", sav);

                    var a=this.parameterlist[i].inventory.indexOf("}");
                    var b=this.parameterlist[i].inventory.substring(1,a)
                    var a1=b.split(",");
                    var splist1=[];
                    for (let c=0;c<a1.length;c++) {
                        var s=a1[c].split(":")[1].substring(1,a1[c].split(":")[1].length-1);
                        splist1.push(s)
                    }
                     //县域百分比回显
                    if( this.parameterlist[i].profitproportion<1){
                        (this.parameterlist[i].profitproportion)*= 100;
                    }else{
                        (this.parameterlist[i].profitproportion)
                    }
                    this.parameterlist[i].splist=(splist1);
                    this.parameterlist[i].savparameterlist=JSON.parse(this.parameterlist[i].secinventory);

                    this.parameterlist[i].companytype= this.parameterlist[i].companytype.toString();
                }
                //参数
                let sav=[];
                if(this.parameterlist!=null&&this.parameterlist.length>0){

                    for(let i=0;i<this.parameterlist.length;i++){
                        let pdata=JSON.parse(this.parameterlist[i].secinventory);

                        console.info(pdata)

                        for (let i=0;i<pdata.length;i++) {
                            let mdata=pdata[i]
                            for (let v in mdata){
                                let data={
                                    key:v,
                                    val:mdata[v].toString()
                                }
                                sav.push(mdata[v].toString());
                            }
                        }
                        this.parameterlist.savparameterlist=pdata;
                    }
                    this.parameterlist.splist=sav;
                }
                this.formName = "examine";
            },
            // 隐藏详情弹框
            hideDetailForm() {
                // 更改值
                this.detailVisible = !this.detailVisible;
                // 清空表单
                this.formData={};
                return true;
            },
            hideExamineForm() {
                // 更改值
                this.examineVisible = !this.examineVisible;
                // 清空表单
                // this.formData={};
                return true;
            },

            /*获取列表事件*/
            getList() {
                this.loading = true;
                this.list = [];
                getList(this.query).then(response => {
                    if (response.code != 0) {
                        this.$message.error(response.message);
                        return false;
                    }
                    let datalist = response.data.list || []
                    if (datalist.length > 0) {
                        let mylist = datalist
                        for (var i = 0; i < mylist.length; i++) {
                            if (mylist[i].onshelfstatus != null) {
                                mylist[i].onshelfstatus = mylist[i].onshelfstatus.toString();
                            }
                            if (mylist[i].recommendstatus != null) {
                                mylist[i].recommendstatus = mylist[i].recommendstatus.toString();
                            }
                            if(mylist[i].belongtype==0){//平台
                                mylist[i].companyName="平台"
                            }
                        }
                        this.list = mylist
                    }
                    this.totalNumber = response.data.totalNumber || 0;
                    setTimeout(() => {
                        this.loading = false;
                    }, 0.3 * 1000);
                }).catch(() => {
                    this.loading = false;
                    this.list = [];
                })
            },

            //一级
            topchange() {
                this.onSubmit();
                // this.getList();
                this.query.secondarycategoryid="";
                this.query.thirdcategoryid="";
                this.busCommoditySecondaryCategoryList=[];
                this.busCommodityThirdCategoryList=[]
                let query={
                    parentid: this.query.topcategoryid,
                    level:2
                };
                if(this.query.topcategoryid){
                    getCategory(query)
                        .then(response => {
                            if (response.code) {
                                this.$message.error(response.message);
                            }
                            let data = response.data || [];
                            this.busCommoditySecondaryCategoryList = data;
                        })
                        .catch(() => {
                            this.busCommoditySecondaryCategoryList = [];
                        });
                }
            },
            //二级
            secondchange() {
                this.onSubmit();
                // this.getList();
                this.query.thirdcategoryid="";
                this.busCommodityThirdCategoryList=[]
                let query={
                    parentid: this.query.secondarycategoryid,
                    level:3
                };
                if(this.query.secondarycategoryid){
                    getCategory(query)
                        .then(response => {
                            if (response.code) {
                                this.$message.error(response.message);
                            }
                            let data = response.data || [];
                            this.busCommodityThirdCategoryList = data;
                        })
                        .catch(() => {
                            this.busCommodityThirdCategoryList=[]
                        });
                }
            },

            //获得分类
            getCategory() {
                let query={
                    level:1
                }
                getCategory(query)
                    .then(response => {
                        if (response.code) {
                            this.$message.error(response.message);
                        }
                        let data = response.data || [];
                        this.category = data;
                    })
                    .catch(() => {
                        this.category = [];
                    });
            },
            /*新增或者编辑提交事件*/
            formSumbit() {
                var ids = this.multipleSelection.map(item => item.commodityid).join(); //获取所有选中行的id组成的字符串，以逗号分隔
                if (ids == "") {
                    this.$message({
                        message: "请先选择",
                        type: "warning"
                    });
                    return;
                }

                this.$emit("on-select", ids, ids);

            },
            /*日期选择事件*/
            dateChange(val) {
                if (val == null) {
                    this.query.starttime = "";
                    this.query.endtime = "";
                } else {
                    this.query.starttime = val[0];
                    this.query.endtime = val[1];
                    this.query.currentPage = 1;
                }
                this.getList();
            },
            /*列表查询条件事件*/
            onSubmit() {
                this.query.currentPage = 1;
                this.getList();
            },

            /*刷新*/
            onRest() {
                //刷新事件需要重置查询条件
                this.createTime = [];
                this.query = {
                    currentPage: 1,
                    pageSize: 10,
                };
                this.getList();
            },

            /*点击页数*/
            handleCurrentChange(val) {
                this.query.currentPage = val;
                this.getList();
            },

            /*选择每页条数【10,20,30,40,50】*/
            handleSizeChange(val) {
                this.query.pageSize = val;
                this.getList();
            },
        },

        created() {
            this.getList();
            this.getCategory();
        }
    }

</script>
<style type="text/css" scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 21px;
        color: #8c939d;
        width: 50px;
        height: 50px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;}
    .thrTitle {
        margin-left: 30px !important;
        font-size: 16px;
        font-weight: 600;
    }
</style>

